<!--
 * @Author: your name
 * @Date: 2021-08-06 17:20:44
 * @LastEditTime: 2021-08-12 21:18:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \系统学习\VueProject\vue02\tabbar\src\components\MaiTabBar.vue
-->
<template>
    <tab-bar>
      <tab-bar-item path="/home" activeColor="blue">
        <!-- 用来替换TabBarItem里面的插槽 -->
        <!-- 在webpack.base.config.js里面起了别名，在这里用要加 ~ 符号才能被识别 -->
        <img slot="item-icon" src="~assets/img/tabbar/home.svg" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/home_active.svg" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="blue">
        <img slot="item-icon" src="~assets/img/tabbar/category.svg" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/category_active.svg" alt="">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="blue">
        <img slot="item-icon" src="~assets/img/tabbar/shopcart.svg" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/shopcart_active.svg" alt="">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="blue">
        <img slot="item-icon" src="~/assets/img/tabbar/profile.svg" alt="">
        <img slot="item-icon-active" src="~/assets/img/tabbar/profile_active.svg" alt="">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
</template>

<script>
import TabBar from 'components/common/tabbar/TabBar.vue'
import TabBarItem from 'components/common/tabbar/TabBarItem.vue'
export default {
    name:'MainTabBar',
    components:{
      TabBar,
      TabBarItem
    }
}
</script>

<style>

</style>
